<script setup>
    const user = {
        username: '张三',
        sex: '男',
        age: 20,
    }
    const activeIndex = '1'
    const myArticles= [{value:"路上只我一个人，背着手踱着。这一片天地好像是我的;我也像超出了平常旳自己，到了另一世界里。我爱热闹，也爱冷静;爱群居，也爱独处。像今晚上，一个人在这苍茫旳月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。"},
                    {value:"曲曲折折的荷塘上面，弥望旳是田田的叶子。叶子出水很高，像亭亭旳舞女旳裙。层层的叶子中间，零星地点缀着些白花，有袅娜(niǎo,nuó)地开着旳，有羞涩地打着朵儿旳;正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉(mò)的流水，遮住了，不能见一些颜色;而叶子却更见风致了。"}
                    ]
    const courseList=[]
    const productList=[]
</script>

<template>
<el-container>
            <el-container style="background-color: #f3eeee;">
                <el-aside style="margin-top: 20px; margin-left: 15px;">
                    <el-card>
                        <el-menu :default-active="activeIndex">
                            <el-menu-item index="1">个人中心</el-menu-item>
                            <el-menu-item index="2">个人资料</el-menu-item>
                            <el-menu-item index="3">账号设置</el-menu-item>
                            <el-menu-item index="4">消息设置</el-menu-item>
                            <el-menu-item index="5">标签管理</el-menu-item>
                        </el-menu>
                    </el-card>
                </el-aside>
                <el-main>
                    <el-card>
                        <el-row>
                            <el-col :span="4">
                                <img src="/images/bg2.jpg" style="width: 90px; margin-left: 60px;">
                            </el-col>
                            <el-col :span="20">
                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <div>
                                <h2>{{user.username}}</h2>
                                <span>性别：{{user.sex}}</span>
                                <span>签名：{{user.sign}}</span>
                            </div>
                            <div style="display: flex; flex-direction: column;">
                                <el-button type="primary" style="width: 130px; margin-bottom: 10px;">
                                    <router-link to="/user/list">我的粉丝</router-link>
                                </el-button>
                                <el-button type="primary" style="width: 120px;">
                                    <router-link to="/user/list">我的关注</router-link>
                                </el-button>
                            </div>
                        </div>
                    </el-col>
                        </el-row>
                    </el-card>
                    <el-card>
                        <el-tabs>
                            <el-tab-pane label="我发布的文章">
                                <div v-if="myArticles.length > 0">
                                    <li v-for="item in myArticles" :key="item.id">
                                        {{item.value}}
                                    </li>
                                </div>
                                <el-empty v-else description="暂无数据"></el-empty>
                            </el-tab-pane>
                            <el-tab-pane label="我发布的课程">
                                <div v-if="courseList.length > 0">
                                    <li v-for="item in courseList" :key="item.id">
                                    {{item.value}}
                                    </li>
                                </div>
                                <el-empty v-else description="暂无数据"></el-empty>
                            </el-tab-pane>
                            <el-tab-pane label="我发布的商品">
                                <div v-if="productList.length > 0">
                                    <li v-for="item in productList" :key="item.id">
                                        {{item.value}}
                                    </li>
                                </div>
                                <el-empty v-else description="暂无数据"></el-empty>
                            </el-tab-pane>
                        </el-tabs>
                    </el-card>
                </el-main>
            </el-container>
            
        </el-container>
</template>

<style scoped>
.el-carousel__item img {
            width: 100%;
            height: 100%;
        }

       .footer-link {
            display: flex;
            justify-content: center;
            margin-top: 55px;
            gap: 70px;
        }

       .footer-links {
            display: flex;
            margin-top: 20px;
            justify-content: center;
            gap: 43px;
        }

       .footer-info {
            margin-left: 150px;
            margin-top: 10px;
            color: #606266;
        }

       .user-info {
            margin-top: 5px;
            margin-left: 100px;
            display: flex;
            align-items: center;
        }

       .user-avatar {
            width: 60px;
            height: 60px;
            margin-right: 5px;
        }
</style>